import React from 'react';
import {
  Text,
  TouchableOpacity,
  View,
  ScrollView,
  StyleSheet,
} from 'react-native';
import { Picker, Provider } from '@ant-design/react-native';
import { adapt } from '../../utils/ScreenAdapter';
import { getmyattendancedetail, getmyattendancerecord } from '../../api/Login';
import moment from 'moment';
import AsyncStorage from '@react-native-community/async-storage';
import {Alert, Loading, NavBar} from '../../components';
const CustomChildren = (props) => (
  <TouchableOpacity onPress={props.onPress}>
    <View
      style={{
        height: 36,
        paddingLeft: 15,
        flexDirection: 'row',
        alignItems: 'center',
      }}
    >
      <Text style={{ flex: 1, fontSize: adapt(20), color: 'rgba(0,0,0,0.84)' }}>
        {props.children}
      </Text>
      <Text
        style={{
          textAlign: 'right',
          color: 'rgba(0,0,0,0.84)',
          marginRight: 15,
          fontSize: adapt(16),
        }}
      >
        {props.extra}
      </Text>
    </View>
  </TouchableOpacity>
);
export default class PopupExample extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = (value) => {
      this.setState({ value });
    };
    this.state = {
      data: [],
      value: [],
      pickerValue: [],
      list: [],
    };
  }
  componentDidMount() {
    console.log();
    this.initMonthData();
    this.getDataList();
  }
  initMonthData() {
    let data = [];
    for (let i = 1; i < 13; i++) {
      data.push({
        label: `${i} 月`,
        value: i,
      });
    }
    this.setState({
      data,
      pickerValue: [new Date().getMonth() + 1],
    });
  }
  getDataList = async (index) => {
    try {
      let userData = await AsyncStorage.getItem('User');
      if (!userData) {
        return false;
      }
      Loading.show();
      let dataList = await getmyattendancerecord({
        employeeId: JSON.parse(userData).id,
        whichMonth: index
          ? `${new Date().getFullYear()}-${index > 10 ? index : `0${index}`}`
          : moment(new Date()).format('YYYY-MM'),
        pageNo: 1,
        pageSize: 50,
      });
      this.setState({
        list: dataList.data.rows,
      });
      Loading.hide();
    } catch (e) {
      console.log(e);
      Loading.hide();
    }
  };
  getDetail = async (record) => {
    console.log(record);
    try {
      let userData = await AsyncStorage.getItem('User');
      let dataList = await getmyattendancedetail({
        employeeId: JSON.parse(userData).id,
        startTime: moment(record.signDate).format('YYYY-MM-DD'),
        endTime: moment(record.signDate).format('YYYY-MM-DD'),
        pageNo: 1,
        pageSize: 50,
      });
      Alert.show({
        title: '打卡记录',
        content: () => {
          return dataList.data.rows.map((item) => (
            <View>
              <View style={styles.item}>
                <Text style={styles.label}>签到设备</Text>
                <Text style={styles.value}>{item.deviceName}</Text>
              </View>
              <View style={styles.item}>
                <Text style={styles.label}>签到时间</Text>
                <Text style={styles.value}>{item.attDatetime}</Text>
              </View>
            </View>
          ));
        },
        hideCancel: true,
        onClose: Alert.hide,
      });
      console.log(dataList);
    } catch (e) {}
  };
  render() {
    return (
      <Provider>
        <NavBar title="打卡记录" hideLeftIcon={true} />
        <View style={{ flex: 1 }}>
          <Picker
            data={this.state.data}
            cols={1}
            value={this.state.pickerValue}
            onOk={(v) =>
              this.setState({ pickerValue: v }, this.getDataList.bind(this, v))
            }
          >
            <CustomChildren>当前月份</CustomChildren>
          </Picker>
          <ScrollView
            style={{ flex: 1, backgroundColor: '#fbfbff' }}
            automaticallyAdjustContentInsets={false}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
          >
            {this.state.list.map((item) => {
              return (
                <View style={styles.itemWrap}>
                  <View style={styles.item}>
                    <Text style={styles.label}>日期</Text>
                    <Text style={styles.value}>{item.signDate}</Text>
                  </View>
                  <View style={styles.item}>
                    <Text style={styles.label}>签到时间</Text>
                    <Text style={styles.value}>{item.signInTime}</Text>
                  </View>
                  <View style={styles.item}>
                    <Text style={styles.label}>签到状态</Text>
                    <Text
                      style={{
                        ...styles.value,
                        color:
                          item.signInStatusNick === '正常'
                            ? 'rgba(0,0,0,0.84)'
                            : 'red',
                      }}
                    >
                      {item.signInStatusNick}
                    </Text>
                  </View>
                  <View style={styles.item}>
                    <Text style={styles.label}>签退时间</Text>
                    <Text style={styles.value}>{item.signOutTime}</Text>
                  </View>
                  <View style={styles.item}>
                    <Text style={styles.label}>签退状态</Text>
                    <Text
                      style={{
                        ...styles.value,
                        color:
                          item.signOutStatusNick === '正常'
                            ? 'rgba(0,0,0,0.84)'
                            : 'red',
                      }}
                    >
                      {item.signOutStatusNick}
                    </Text>
                  </View>
                  <View style={styles.item}>
                    <Text style={styles.label}>查看详情</Text>
                    <TouchableOpacity
                      activeOpacity={0.6}
                      onPress={this.getDetail.bind(this, item)}
                    >
                      <Text style={styles.value}>请单击此处查看</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              );
            })}
          </ScrollView>
        </View>
      </Provider>
    );
  }
}
const styles = StyleSheet.create({
  itemWrap: {
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(0,0,0,0.08)',
  },
  item: {
    paddingHorizontal: 15,
    paddingVertical: 4,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});
